<!doctype html>
<html>
<head>
    <title>普通的导航栏</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!--demo展示所用css，不用关心 begin-->
    <link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
    <!--demo展示所用css end-->
    <!--组件依赖css begin-->
    <link rel="stylesheet" type="text/css" href="../../../assets/widget/navigator/navigator.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/widget/navigator/navigator.default.css" /><!--皮肤文件，若不使用该皮肤，可以不加载-->
    <!--组件依赖css end-->

    <!--组件依赖js begin-->
    <script type="text/javascript" src="../../../dist/zepto.js"></script>
    <script type="text/javascript" src="../../../src/extend/touch.js"></script>
    <script type="text/javascript" src="../../../src/extend/highlight.js"></script>
    <script type="text/javascript" src="../../../src/extend/parseTpl.js"></script>
    <script type="text/javascript" src="../../../src/core/gmu.js"></script>
    <script type="text/javascript" src="../../../src/core/event.js"></script>
    <script type="text/javascript" src="../../../src/core/widget.js"></script>
    <script type="text/javascript" src="../../../src/widget/navigator/navigator.js"></script>
    <!--组件依赖js end-->
</head>
<body>

<div id="wrap">
    <h1>Navigator 基础版本</h1>
    <h2>Setup Mode</h2>
    <ul id="nav">
        <li><a href="#test1">首页</a></li>
        <li><a href="#test2">电影</a></li>
        <li><a class="cur" href="#test3">电视剧</a></li>
        <li><a>动漫</a></li>
    </ul>

    <h2>Render Mode</h2>
    <div id="nav2"></div>
</div>

<script type="text/javascript">
    var instance1 = new gmu.Navigator('#nav');

    var instance2 = new gmu.Navigator('#nav2', {
        content: [
            {
                text: '首页',
                href: '#home'
            },

            {
                text: '电影',
                href: '#movie'
            },

            {
                text: '电视剧',
                href: '#series'
            },

            {
                text: '动漫',
                href: '#manga'
            }
        ]
    });

    instance2.on('beforeselect', function( e, li ){
        if( $(li).text() === '首页' ) {
            e.preventDefault();
            alert('beforeselect事件被阻止，点击事件将无效');
        }
    });
</script>
</body>
</html>